<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div v-cloak>
        <el-select v-model="companyId" v-loading="loading" :disabled="disabled" :clearable="true" :style="customStyle"
            :size="size" :popper-append-to-body="false" placeholder="请选择" class="option">
            <el-option v-for="(item, index) in options" :key="index" :label="item.name" :value="item.id">{{ item.name
            }}</el-option>
        </el-select>
        <i style="margin-left:8px;" v-show="!loading" class="el-icon-refresh-right" @click="loadCompanies"></i>
    </div>
</template>

<script>
// 请求公司数据的api
import { getCompaniesList } from "@/api/company";
export default {
    //组件名
    name: "company-picker",
    //  接收父组件值
    props: {
        value: { type: Number, default: null },
        size: { type: String, default: "small" },
        customStyle: { type: String, default: null },
        firstOption: { type: Object, default: null },
        disabled: { type: Boolean, default: false },
    },

    data () {
        return {
            loading: false,
            // 公司数据
            companies: [],
        };
    },
    created () {
        this.loadCompanies();
    },

    computed: {
        companyId: {
            get () {
                return this.value;
            },
            set (val) {
                this.$emit("input", val);
            },
        },
        options: function () {
            if (!this.firstOption) {
                return this.companies;
            }
            return [this.firstOption].concat(this.companies);
        },
    },

    methods: {
        loadCompanies: function () {
            this.loading = true;
            getCompaniesList({ per_page: 10000 }).then((resp) => {
                if (resp.status == 0) {
                    this.companies = resp.data.result;
                }
                this.loading = false;
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.option {
    height: 32px !important;
}
</style>